<!-- @format -->

<template>
    <div style="clear:both;width:100%;height: 38px; position: relative; z-index: 9">
        <div class="ant-pagination-options-quick-jumper" v-if="totalCount >10">
            跳至
            <a-input v-model="goto" @change="validateText(goto)" @pressEnter="onPage(goto)" />
            页
        </div>
        <div class="pagination-total" v-show="totalCount >0">共<span>{{totalCount}}</span>条</div>
        <a-pagination
                style="margin-top:16px; text-align: right"
                :defaultCurrent="1"
                :current="currentPage"
                :pageSize="pageSize"
                :total="totalCount"
                :hideOnSinglePage="totalCount === 0"
                @change="onPage" :itemRender="itemRender"
                showSizeChanger @showSizeChange="onShowSizeChange"
        />
    </div>
</template>
<script>
export default {
    name: 'pagination',
    props: ['totalCount', 'currentPage','pageSize'],
    data() {
        return {
            goto: '',
        }
    },
    methods: {
        onPage(page) {
            if (page === '') {
                this.$emit('changePage', 1)
            } else {
                this.$emit('changePage', page)
            }
            // 清空页数
            this.goto = ''
        },
        itemRender(current, type, originalElement) {
            if (type === 'prev') {
                return <a><a-icon type="left" /></a>;
            } else if (type === 'next') {
                return <a><a-icon type="right" /></a>;
            }
            return originalElement;
        },
        onShowSizeChange(current, pageSize) {
            this.$emit('changePageSize', pageSize)
        },
        validateText(text) {
            if (text !== undefined && text !== '') {
                let total = Math.ceil(this.totalCount / 10)
                text = text || ''
                text = text.replace(/\D/g, '')
                text = Number(text)
                if (text < 1) {
                    text = 1
                }
                if (text > total) {
                    text = total
                }
                this.goto = text
            }
        }
    }
}
</script>
